<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Local Storage</title>
    <script src="../../Site/static/js/crypto-js-3.1.9-1/crypto-js.js"></script>
</head>
<body style="font-size: 20px;">
<div id="msg" style="background-color: #0c5460;color: #f6f6f6">
    Msg:
</div>
<form>
    <input id="text" type="text"><br>
    <input id="save" type="button" value="save" onclick="onSaveClick()"><br>
    <input id="load" type="button" value="load" onclick="onLoadClick()"><br>
</form>
<script>
    let key = "12345678";

    function onSaveClick() {
        let inputText = document.getElementById("text");
        let val = encrypt(inputText.value, key);
        sessionStorage.setItem("text", val);
        console.log("save val=" + val);
    }

    function onLoadClick() {
        let val = sessionStorage.getItem("text");
        let inputText = document.getElementById("text");
        if (val == null)
            inputText.value = "no info!";
        else {
            val = decrypt(val, key);
            inputText.value = val;
        }
        console.log("load val=" + val);
    }

    function encrypt(content, key = "") {
        let result = CryptoJS.AES.encrypt(content, CryptoJS.enc.Utf8.parse(key), {
            padding: CryptoJS.pad.Pkcs7,
            mode: CryptoJS.mode.ECB
        });
        return result;
    }

    function decrypt(content, key = "") {
        let result = CryptoJS.AES.decrypt(content, CryptoJS.enc.Utf8.parse(key), {
            mode: CryptoJS.mode.ECB,
            padding: CryptoJS.pad.Pkcs7
        });
        return result;
    }
</script>
</body>
</html>